<template>
  <section class="chart" ref="chart"></section>
</template>

<script>
import * as echarts from 'echarts'
import { Grid, Legend, XAxis, YAxis, Tooltip, Series } from './config'
let myChart = null
export default {
  name: 'stackingBar',
  title: '深度折线图',
  desc: '[首页/预警发展趋势]',
  props: {
    chartData: {
      type: Object,
      twoWay: true,
      default: () => ({
        xAxis: ['001', '002', '003', '004', '005', '006', '007'],
        series: [
          { label: 'A', value: [1, 3, 5, 7, 9, 1, 3] },
          { label: 'B', value: [2, 4, 6, 8, 2, 4, 6] }
        ]
      })
    },
    unit: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  computed: {
    watchChartData () {
      return this.chartData
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart () {
      if (myChart != null && myChart !== '' && myChart !== undefined) {
        myChart.dispose()
      }
      myChart = echarts.init(this.$refs.chart)
      myChart.onresize = myChart.resize
      const data = this.chartData
      const unit = this.unit || null
      const option = {
        grid: Grid(30, 40, 0),
        legend: Legend(),
        xAxis: XAxis(data.xAxis),
        yAxis: YAxis(unit),
        tooltip: Tooltip(unit),
        series: Series(data.series)
      }
      myChart.setOption(option)
    }
  },
  watch: {
    watchChartData () {
      this.initChart()
    }
  }
}
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
